import React, { PureComponent } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { ListItem, ListInfo, LoadMore } from './style'
import { actionCreators } from '../../store'

class List extends PureComponent {
  render () {
    const { articleList, addList, page } = this.props

    return (
      <div>
        {
          articleList.map((item, index) => (
            <Link to={`/detail/${item.get('id')}`} key={index}>
              <ListItem>
                <img className="pic" src={item.get('imgUrl')} alt="" />
                <ListInfo>
                  <h3 className="title">{item.get('title')}</h3>
                  <p className="desc">{item.get('desc')}</p>
                </ListInfo>
              </ListItem>
            </Link>
          ))
        }
        <LoadMore onClick={() => {addList(page)}}>更多</LoadMore>
      </div>
    )
  }
}

const mapState = (state) => ({
  articleList: state.getIn(['home', 'articleList']),
  page: state.getIn(['home', 'articlePage'])
})

const mapAction = (dispatch) => ({
  addList: (page) => {
    dispatch(actionCreators.addHomeDataAction(page))
  }
})

export default connect(mapState, mapAction)(List)
